<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 300px;
            margin: auto;
            text-align: center;
        }

        #picture {
            display: inline-block;
            height: 400px;
        }

        #gos {
            display: inline-block;
            line-height: 50px;
            height: 50px;
            width: 110px;
            background: #578f14;
            color: white;
            font-weight: bold;
            border-radius: 50px;
            font-size: 20px;
            border: 1px solid #fff8f0;
            box-shadow: 0px 2px 5px green;
        }
    </style>
    <script>
        let arrPic = [
            "../img/1.jpg",
            "../img/2.png",
            "../img/3.jpg",
            "../img/4.jpg",
            "../img/5.jpg",
            "../img/6.jpg"];
        let arrNames = ["空军", "武警", "海军", "陆军", "火箭军", "战略支援部队",];
        let index = 0;
        //统计抽中的次数
        let arrCount = [0, 0, 0, 0, 0, 0];

        //在指定范围随机抽取de方法
        function getRandom(s, e) {
            let max = Math.max(s, e);
            let min = Math.min(s, e);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function running() {
            //调用随机抽取方法   数组下标来自于此范围
            index = getRandom(0, arrPic.length - 1);
            let picture = document.getElementById("picture")
            picture.src = arrPic[index];
            let lx = document.getElementById("names");
            lx.innerHTML = arrNames[index];
        }


        onload = () => {
            let gos = document.getElementById("gos");
            //let count = document.getElementById("count");
            let i = 0;
            gos.onclick = () => {
                i++;
                if (i % 2) {
                    gos.style.background = "red";
                    gos.style.boxShadow = " 0px 2px 5px red";
                    gos.innerHTML = "STOP";
                    run = setInterval("running()", 600);
                } else {
                    gos.style.background = "#578f14";
                    gos.style.boxShadow = " 0px 2px 5px green";
                    gos.innerHTML = "GO";
                    clearInterval(run);
                    for (let i = 0; i < arrCount.length; i++) {
                        if (index === i) {
                            arrCount[i]++;
                        }
                    }
                }
                count.innerHTML = arrNames[index]+"出现了第"+arrCount[index]+"次"/*arrCount*/;
            }
        }
    </script>

</head>
<body>
<div id="box">
    <img src="../img/1.jpg" id="picture">
    <h3 id="names">空军</h3>
    <p id="count"></p>
    <div id="gos">GO</div>
</div>

</body>
</html>